<template>
  <div>content: {{ content }}</div>
  <button @click="changePageNumber">第{{ pageNumber }}页</button>
</template>

<script lang="ts">
import {  defineComponent, ref, watchEffect,  } from 'vue'
import axios from 'axios';

export default defineComponent({
  name: 'APP',
  setup() {
    let pageNumber = ref(1);
    let content = ref('');

    const changePageNumber = () => {
      pageNumber.value++;
    }

    watchEffect((onInvalidate) => {
      const CancelToken = axios.CancelToken;
      const source = CancelToken.source();
      onInvalidate(() => {
        source.cancel();
      });
      axios.get(`http://localhost:3001/${pageNumber.value}.json`, {
          cancelToken: source.token,
      }).then((response) => {
        content.value = response.data.content;
      }).catch(function (err) {
        if (axios.isCancel(err)) {
          console.log('Request canceled', err.message);
        }
      });
    });
    return {
      pageNumber,
      content,
      changePageNumber,
    }
  }
})
</script>